<template>
	<view>
		<uni-nav-bar title="全部分类" leftIcon="arrowleft" rightIcon="search" @clickLeft="back">	
		</uni-nav-bar>
		<view class="male">
			<view class="maleIcon">
				<uni-icons type="person" size="30" color="#007AFF"></uni-icons>男生
			</view>
			<view class="listBox">
				<view v-for="item in Obj.male" :key="item.id" class="listItem" @click="toNext(item.id, item.sortName)">
				    <view class="title">
				    	{{item.sortName}}
				    </view>
				    <view class="number">
				    	共{{item.bookCount}}册
				    </view>
				</view>
			</view>
			
		</view>
		<view class="female">
			<view class="femaleIcon">
				<uni-icons type="person" size="30" color="#BC4F82"></uni-icons>女生
			</view>
			
			<view class="listBox">
				<view v-for="item in Obj.female" :key="item.id" class="listItem" @click="toNext(item.id, item.sortName)">
				    <view class="title">
				    	{{item.sortName}}
				    </view>
				    <view class="number">
				    	共{{item.bookCount}}册
				    </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Obj: {
					"male": [
						{
							 "id": 1,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 2,
							 "channelId": 4,
							 "sortName": "hhh",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 3,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 4,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 9,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 5,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						},
						{
							 "id": 6,
							 "channelId": 4,
							 "sortName": "玄幻",
							 "parentId": 0,
							 "bookCount": 41,
							 "booksList": null,
							 "createTime": "2020-06-01T08:29:15.000+0000"
						}
						],
					"female": [
						 {
						     "id": 15,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 16,
						     "channelId": 7,
						     "sortName": "霸道总裁爱上我",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 17,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 18,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 19,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 20,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 21,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 },
						 {
						     "id": 22,
						     "channelId": 7,
						     "sortName": "古代言情",
						     "parentId": 0,
						     "bookCount": 10,
						     "booksList": null,
						     "createTime": "2020-06-01T08:29:15.000+0000"
						 }
					]
		        }
			}
		},
		onReady() {
			// uni.request({
			// 	url: 'http://localhost:8001/classify/firstClassify',
			//  method: 'get'
			// 	success(res) {
			// 		alert(res)
			// 	}
			// })
			
		},
		methods: {
			toNext(id, name) {
				uni.navigateTo({
					url: `/pages/bookshop/classify/nextClassify?id=${id}&name=${name}`
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>
    .listBox {
		display: flex;
	}
	.listBox uni-list-item {
		width: 33.3333%
	}
<style>
	.listBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap 
	}
	.listItem {
		width: 30%;
		margin: 1%;
	}
	.title {
		width: 100%;
		text-align: center;
	}
	.number {
		width: 100%;
		text-align: center;
		color: #ccc;
		font-size: 12px;
	}
	.maleIcon .femaleIcon {
		display: block;
		margin: 20px;
	}
</style>
